<template>
    <div class="mainContent">
        <div class="down" style="width: 100%;">
            <el-button v-if="auth.isAddData" type="primary" @click="updataRow(0)" size="small" style="background:#00ACFB;border:1px solid #00ACFB;">添加智能电箱</el-button>
        </div>
        <div class="tableList" style="width:100%;">
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="name" label="设备名称" class-name="padding_left"></el-table-column>
                <el-table-column prop="sn" label="设备编码"></el-table-column>
                <el-table-column prop="platformName" label="硬件厂商"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center" v-if="auth.isEdit||auth.isDelete">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="updataRow(1,scope.$index,list)" type="text" size="small" style="color:#00AFFB" v-if="auth.isEdit">编辑</el-button>
                        <el-button style="color:red" @click.native.prevent="remove(scope.$index,list)" type="text" size="small" v-if="auth.isDelete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="clearfix" v-show="list.length>0">
            <div class="float-right">
                <Page
                    v-if="totalCount"
                    style="margin-top: 20px;text-align: center;"
                    :current.sync="current"
                    :total="totalCount"
                    :page-size="pageSize"
                    show-elevator
                    show-total
                    @on-change="pageChange">
                </Page>
            </div>
        </div>

        <Modal v-model="Modal" :title="isAdd? '添加设备':'编辑设备' " width="520px;" :mask-closable="false" class-name='msgModal'>
            <div class="addBox">
                <div class="item">
                    <span class="tip">*</span>
                    <span>设备名称:</span>
                    <Input v-model="Mach_name" placeholder="请输入设备名称" style="width: 300px" clearable />
                </div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>设备编码:</span>
                    <Input v-model="Mach_Sn" :disabled='!isAdd' placeholder="请输入设备编码" style="width: 300px" :maxlength="32" clearable />
                </div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>硬件厂商:</span>
                    <Select v-model="Mach_platform" style="width:300px;" placeholder="请选择">
                        <Option v-for="item in platformList" :value="item.platform" :key="item.platform">
                            {{ item.name }}
                        </Option>
                    </Select>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" style="padding: 7px 25px;border-radius: 15px;background: #fff;border: 1px solid #00acfb;" type="info" size="mini">
                    <span class="text" style="color: #00acfb">取消</span>
                </el-button>
                <el-button @click="Submit" type="primary" style="padding: 7px 25px;border-radius: 15px; background: #fff;border: 1px solid #00acfb;" size="mini" v-preventReClick="1500">
                    <span class="text" style="color: #00acfb">确定</span>
                </el-button>
            </div>
        </Modal>

        <Modal v-model="delModal" title="删除设备" width="360px;" :mask-closable="false" class-name="msgModal">
            <div style="margin: 10px">确定要删除此设备吗？</div>
            <div slot="footer">
                <el-button @click="cancel(1)" style="padding: 7px 25px;border-radius: 15px;background: #fff;border: 1px solid #00acfb;" type="info" size="mini">
                    <span class="text" style="color: #00acfb">取消</span>
                </el-button>
                <el-button @click="deteleSub" type="primary" style="padding: 7px 25px;border-radius: 15px; background: #fff;border: 1px solid #00acfb;" size="mini" v-preventReClick="1500">
                    <span class="text" style="color: #00acfb">确定</span>
                </el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { getHdcPlatformList, getEnergyElectricBoxList, getEnergyElectricBoxAdd, getEnergyElectricBoxEdit, getEnergyElectricBoxDle } from "@/api/energy.js";
export default {
    data() {
        return {
            deptId: "",
            list: [],
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            Modal: false,
            isAdd: false,
            Mach_name: "",
            Mach_Sn: '',
            Mach_platform: '',
            delModal: false,
            removeID: '',
            editId: "",
            //硬件平台列表
            platformList: [],
            auth:{
                isAddData:false,
                isEdit: false,
                isDelete:false
            }, 
            btnList:[] //权限列表
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getList();
            }
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getList();
        this.getHdcPlatformListFn();
        this.btnList = JSON.parse(localStorage.getItem("arr"));//localStorage当中的arr项存取的是按钮权限列表
        this.initAuth() //初始化权限
    },
    methods: {
        initAuth(){
            this.auth.isAddData = this.btnList.includes('energy/electric/add')
            this.auth.isEdit = this.btnList.includes('energy/electric/edit')
            this.auth.isDelete = this.btnList.includes('energy/electric/delete')
        },
        //获取硬件平台列表
        getHdcPlatformListFn() {
            let params = {
                deviceType: 15
            }
            getHdcPlatformList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.platformList = res.data.list || [];
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 0) {
                this.Modal = false
            }
            if (type == 1) {
                this.delModal = false
            }
        },
        pageChange(index) {
            this.pageNum = index;
            this.getList();
        },
        getList() {
            let params = {
                deptId: this.deptId,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            }
            getEnergyElectricBoxList(params)
                .then((res) => {
                    if (res.code == 200) {
                        let list = res.data.list || [];
                        for (let i = 0; i < list.length; i++) {
                            for (let j = 0; j < this.platformList.length; j++) {
                                if (list[i].platform === this.platformList[j].platform) {
                                    list[i].platformName = this.platformList[j].name;
                                }
                            }
                        }
                        this.list = list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除
        remove(index, rows) {
            this.removeID = rows[index].boxId;
            this.delModal = true;
        },
        deteleSub() {
            getEnergyElectricBoxDle(this.removeID).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.delModal = false
                    this.getList();
                } else {
                    this.$Message.warning(res.msg);
                }
            })
                .catch((error) => {
                    console.log(error);
                });
        },
        updataRow(type, index, rows) {
            if (type == 0) {
                this.isAdd = true;
                this.Modal = true;
                this.Mach_name = '';
                this.Mach_Sn = '';
                this.Mach_platform = '';
            }
            if (type == 1) {
                this.isAdd = false
                this.Modal = true
                this.editId = rows[index].boxId;
                this.Mach_name = rows[index].name;
                this.Mach_Sn = rows[index].sn;
                this.Mach_platform = rows[index].platform;
            }
        },
        Submit() {
            if (!this.Mach_name) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入设备名称"
                });
                return;
            }
            if (!this.Mach_Sn) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入设备编码"
                });
                return;
            }
            if (!this.Mach_platform) {
                this.$Modal.warning({
                    title: "您有必选字段",
                    content: "请选择硬件平台"
                });
                return;
            }
            let params = {
                deptId: this.deptId,
                name: this.Mach_name,
                sn: this.Mach_Sn,
                platform: this.Mach_platform,
            }
            if (this.isAdd) {
                getEnergyElectricBoxAdd(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.Modal = false
                            this.getList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            } else {
                params.boxId = this.editId
                getEnergyElectricBoxEdit(params)
                    .then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.Modal = false
                            this.getList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            }
        }
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style lang="scss" scoped>
@import "./../../assets/style/evn/msgModal.scss";

.addBox {
    .item {
        span:first-child {
            margin-right: 20px;
        }
    }
}

.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .tableList {
        width: 100%;
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 4px;
    }
}
</style>
